<!-- 优秀员工列表 -->
<template>
  <div id="TopPerformers">
    <div
      v-for="(item, index) in topPerformersListData"
      :key="index"
      class="topperformers"
    >
      <div class="top_per_box">
        <div class="item_portrait">
          <div class="portrait margin_r_20">
            <el-avatar
              size="large"
              :src="item.portrait"
              icon="el-icon-user-solid"
            />
          </div>
          <div class="name_box">
            <div class="name">{{ item.name }}</div>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
        <div class="item">
          <el-popover placement="bottom" trigger="click">
            <div class="options_box">
              <div
                v-for="(optionsitem, optionsindex) in OptionsList"
                :key="optionsindex"
                class="item"
                :style="optionsitem.type === 'danger'?' color: #F56C6C;': ''"
                @click="OptionsClick(optionsitem.id)"
              >
                <i :class="optionsitem.icon" class="margin_r_10" />
                {{ optionsitem.title }}
              </div>
            </div>
            <el-button
              slot="reference"
              type="text"
              size="small"
            >
              <i class="el-icon-more" />
            </el-button>
          </el-popover>
        </div>
      </div>
      <el-divider v-if="index !== topPerformersListData.length - 1" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopPerformers',
  props: {
    topPerformersListData: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      // 选项
      OptionsList: [
        {
          title: '编辑',
          icon: 'el-icon-edit',
          id: '1'
        },
        {
          title: '退出团队',
          icon: 'el-icon-folder-delete',
          id: '2'
        },
        {
          title: '删除',
          icon: 'el-icon-delete',
          type: 'danger',
          id: '3'
        }
      ]
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 选项点击事件 1 编辑 2 退出团队 3 删除
    OptionsClick(OptionsClick) {
      if (OptionsClick === '1') {
        console.log('编辑')
      } else if (OptionsClick === '2') {
        console.log('退出团队')
      } else {
        console.log('删除')
      }
    }
  }
}
</script>

<style lang='scss' scoped>
#TopPerformers {
  .topperformers {
    display: flex;
    flex-direction: column;
    .top_per_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item_portrait {
        display: flex;
        align-items: center;
      }
      .name_box {
        .name {
          margin-bottom: 10px;
          font-size: 1.2rem;
          font-weight: bold;
        }
        .title {
          font-size: 1rem;
          font-weight: 600;
          color: #6c757d;
        }
      }
    }
  }
}
</style>
